<!--
 * @file 列表分类组件
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/11/05
-->
<template>
  <div
    class="classify-list-comp"
    :style="{
      marginTop: top,
      marginLeft: spacing,
      marginRight: spacing
    }"
  >
    <ul>
      <li v-for="(parentItem,index) in list" :key="index">
        <van-cell-group
          :class="{'round':option.radius === '1'}"
        >
          <van-cell
            v-for="(item, i) in parentItem.list"
            v-if="item.isShow"
            :key="i"
            :title="item.title"
            :is-link="option.isLink === '1'"
            :title-style="titleStyle"
          >
            <template v-if="option.icon === '1'" #icon>
              <van-image
                :width="px2rem(option.iconSize) || '.64rem'"
                :height="px2rem(option.iconSize) || '.64rem'"
                :src="item.icon"
                class="cell-icon"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </li>
    </ul>
  </div>

</template>

<script>
import mixins from './../mixins'

export default {
  name: 'ClassifyList',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultList: [
        {
          'list': [
            {
              'title': '微信',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116295911b3fdc2447c9636e539b6bf7054.png',
              'link': '',
              'code': 'bindWx',
              'value': '',
              'isShow': true
            }
          ]
        },
        {
          'list': [
            {
              'title': '练兵回顾',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116f4882e42da6e4b26a97163d1fc6a88ad.png',
              'link': '/pass/record',
              'code': 'lbhg',
              'value': '',
              'isShow': true
            },
            {
              'title': '我的抽奖',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116ba2109db48ce4c8f9357aec61df61f3b.png',
              'link': '/myRaffle',
              'code': 'wdcj',
              'value': '',
              'isShow': true
            },
            {
              'title': '任务日历',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116467fa2f856b142139aeb2d1011521e37.png',
              'link': '',
              'code': 'rwrl',
              'value': '',
              'isShow': false
            },
            {
              'title': '我的荣誉',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116b52ae136871c4d77850667dc4fbd3e54.png',
              'link': '/classList',
              'code': 'wdry',
              'value': '',
              'isShow': true
            },
            {
              'title': '我的收藏',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/2211161f57f36e0149495aa1770d1a12edf315.png',
              'link': '/center/myCollection',
              'code': 'wdsc',
              'value': '',
              'isShow': true
            }
          ]
        },
        {
          'list': [
            {
              'title': '音频模式',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/22111663a1cbcae7f4438096235049b046122d.png',
              'link': '/center/playSettings',
              'code': 'ypms',
              'value': '',
              'isShow': false
            },
            {
              'title': '收货地址',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116d19d3785df7046bd974c824f1d98d0c9.png',
              'link': '',
              'code': 'shdz',
              'value': '',
              'isShow': false
            }
          ]
        },
        {
          'list': [
            {
              'title': '关于我们',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116e5da60a5a85e42ffa1eaf4be6245b7cf.png',
              'link': '/center/userIframe?t=3',
              'code': 'gywm',
              'value': '',
              'isShow': true
            },
            {
              'title': '联系我们',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116548dc0d6035a435f9de685170dea80c8.png',
              'link': '/center/userIframe?t=4',
              'code': 'lxwm',
              'value': '',
              'isShow': true
            }
          ]
        },
        {
          'list': [
            {
              'title': '用户协议',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/2211168f3dba297a674bd18135823af8041549.png',
              'link': '/center/userIframe?t=1',
              'code': 'yhxy',
              'value': '',
              'isShow': true
            },
            {
              'title': '隐私政策',
              'icon': 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/16/221116870101d1058a44c18b8eab910bb34f65.png',
              'link': '/center/userIframe?t=2',
              'code': 'yszc',
              'value': '',
              'isShow': true
            }
          ]
        }
      ],
      list: []
    }
  },
  computed: {
    titleStyle() {
      let s = ''
      if (this.option.fontSize) {
        s += `font-size: ${this.px2rem(this.option.fontSize)};`
      }
      if (this.option.color) {
        s += `color: ${this.option.color};`
      }
      if (this.option.isBold === '1') {
        s += `font-weight: bold;`
      }
      return s
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.list = result
    },
    /**
     * 跳转页面
     */
    goPage(item) {
      if (item.link) {
        window.location.href = item.link
      }
    }
  }
}
</script>

<style  lang="scss">
@import "@/styles/utility/rem.scss";

.classify-list-comp {
  > ul {
    li {
      margin-bottom: rem(20);

      .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
        display: none;
      }

      .van-cell-group {
        margin: 0 auto;

        &.round {
          border-radius: rem(16);
        }

        .van-cell {
          background-color: transparent;
        }

        .cell-icon {
          margin-right: rem(20);
        }
      }

    }
  }

}

</style>

